<template>
  <div>
    <el-breadcrumb :separator-icon="ArrowRight" separator="/">
      <el-breadcrumb-item class="breadcrumbTab" v-for="breadItem in breadCrumbList" :key="breadItem.id" :to="{ path: breadItem.path }">
        {{ breadItem.meta.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ArrowRight } from '@element-plus/icons-vue'
import { watch, ref } from 'vue'
const route = useRoute()

const getBreadCrumbList = () => {
  return route.matched
}
const breadCrumbList = ref([])
const watchRoute = watch(route, () => {
  breadCrumbList.value = getBreadCrumbList()
}, {
  immediate: true
})
</script>

<style scoped>
  .breadcrumbTab{
    margin-bottom: 17px;
  }
</style>
